<template>
    <div ref="myChart"/>
</template>

<script>
import {onMounted, ref} from "vue";
import http from "@/commons/utils/httpUtil";
import echartsUtil from "@/commons/utils/echartsUtil";
import NumberUtil from "@/commons/utils/numberUtil";

export default {
    name: "SzGoodsPieChart",
    setup() {
        const myChart = ref(null)
        let dbData = []
        let option = {}

        // 查询后台数据
        const queryData = async () => {
            await http.get('/large/querySzGoodsOverviewData/' + '\'全港合计\', \'南山港区\', \'盐田港区\', \'大铲湾港区\', \'宝安港区\', \'大鹏港区\'').then((res) => {
                let isValid = res && res.data && res.data.data && res.data.data.length >= 0;
                dbData = isValid ? res.data.data : [];
            });
        }

        const setOption = () => {
            option = {
                tooltip: {
                    position: function (pos, params, dom, rect, size) {
                        // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                        let obj = {top: 60};
                        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                        return obj;
                    },
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}万吨 ({d}%)'
                },
                // legend: {
                //     data: dbData.map(item => item.portNameCn)
                // },
                series: [
                    {
                        name: '货物吞吐量',
                        type: 'pie',
                        radius: [0, '40%'],
                        selectModel: false,
                        label: {
                            position: 'center',
                            fontSize: 16,
                            color: '#38E5ED',
                            fontWeight: 'bold',
                            // textShadow: '0 0 5px #FF0000, 0 0 5px #6bf403'
                        },
                        labelLine: {
                            show: false
                        },
                        data: [{value: NumberUtil.toFixed(dbData[0].parentCumThr/10000, 2), name: dbData[0].portNameCn}]
                    },
                    {
                        name: '货物吞吐量',
                        type: 'pie',
                        radius: ['45%', '70%'],
                        labelLine: {
                            length: 5
                        },
                        label: {
                            formatter: '{b|{b}}',
                            // formatter: '{b|{b}:}{d|{d}}',
                            // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                            // backgroundColor: '#F6F8FC',
                            // borderColor: '#8C8D8E',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                b: {
                                    color: '#38E5ED',
                                    fontSize: 16,
                                    lineHeight: 33
                                },
                                d: {
                                    color: '#38E5ED',
                                    fontSize: 16,
                                    lineHeight: 33
                                },
                            }
                        },
                        data: dbData.filter((item, index) => index > 0).map(item => {return {value: NumberUtil.toFixed(item.parentCumThr/10000, 2), name: item.portNameCn.replace('港区', '')}})
                    }
                ]
            }
        }

        onMounted(async () => {
            // 查询数据
            await queryData()
            // 初始化echarts组件实例
            let myChartInstance = echartsUtil.initMyChart(myChart.value)
            setOption()

            myChartInstance.on('click', function () {
                window.AC.ShowWindow(6, 'http://localhost:8080/#/sz-goods-middle-home/sz', {
                    draggable: false,
                    resize: false
                });
            });

            myChartInstance.setOption(option)
        })

        return {
            myChart
        }
    }
}
</script>

<style scoped>

</style>